<%@ page session="false"%>
<%@ page
	import="java.util.List,java.util.Iterator,com.fengshang.wedding.domain.model.*"%>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FengShang Wedding</title>
<meta name="keywords" content="fengshang,wedding" />
<meta name="description" content="fengshang wedding service" />
<meta name="author" content="fengshang" />
<link rel="stylesheet" type="text/css"
	href="css/blitzer/jquery-ui-1.7.2.custom.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/flexigrid.pack.js"></script>

<script type="text/javascript" src="js/json2.js"></script>
<!-- generally javascript should go in a separate file -->
<script type="text/javascript"> 
	$(document).ready(function() {
		$('#userForm').ajaxForm( {
			type : 'POST',
			dataType : 'json',
			success : processJson,
			target : '#userResults'
		});

		$('#topicForm').ajaxForm( {
			type : 'POST',
			//dataType : 'json',
			//success : processJson,
			target : '#topicResults'
		});
		$('#getTopicForm').ajaxForm( {
			type : 'POST',
			//dataType : 'json',
			//success : processJson,
			target : '#getTopicResults'
		});
		
		$('#getMessageForm').ajaxForm( {
			type : 'POST',
			//dataType : 'json',
			//success : processJson,
			target : '#getMessageResults'
		});
		
		function processJson(data) {
			// 'data' is the json object returned from the server 
			//var resultData = JSON.parse(data); 
			$.each(data.list.user, function(i, item) {
				$("#userResults2").append(
						"record[" + i + "] id:" + item.id + ", name:"
								+ item.name + "<br/>");
			});
		}

		$('#getName').bind('click', function() {
			$.getJSON('ajax.json', function(data) {
				$('#firstname').html(data.firstname);
				$('#secondname').html(data.secondname);
			});
		});
		
		
		$("#tableFlex").flexigrid(
		{
			url: 'findAllUsers.do',
			dataType: 'json',
			striped:true,   
			procmsg:'Loading...',   
			colModel : [
				{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
				{display: 'Name', name : 'name', width : 80, sortable : true, align: 'center'},
				{display: 'Password', name : 'password', width : 80, sortable : true, align: 'center'},
				{display: 'Email', name : 'email', width : 80, sortable : true, align: 'center'},//, hide: true
				{display: 'QQ', name : 'qq', width : 80, sortable : true, align: 'center'},
				{display: 'Mobile', name : 'mobile', width : 80, sortable : true, align: 'center'},
				{display: 'Phone', name : 'phone', width : 80, sortable : true, align: 'center'},
				{display: 'Gender', name : 'gender', width : 40, sortable : true, align: 'center'},
				{display: 'Website', name : 'website', width : 80, sortable : true, align: 'center'},
				{display: 'Role', name : 'role', width : 40, sortable : true, align: 'center'}
				],
			buttons : [
				{name: 'Add', bclass: 'add', onpress : test},
				{name: 'Delete', bclass: 'delete', onpress : test},
				{separator: true}
				],
		usepager: true,
			title: 'Users',
			useRp: true,
			rp: 20,
			showTableToggleBtn: false,
			width: 900,
			height: 200
			}
			);
		
		
		function test(com,grid){
				if (com=='Delete'){
						confirm('Delete ' + $('.trSelected',grid).length + ' items?')
			}else if (com=='Add'){
						alert('Add New Item');
			}			
		}
		
		
	});
</script>
</head>
<body class='normal'>

<div id="dialog" title="Create new user">
<p id="validateTips">All form fields are required.</p>
<form id="userForm" action="createUser.do" method="post">
<fieldset><label for="name">Name</label> <input type="text"
	name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Email</label> <input type="text" name="email"
	id="email" value="" class="text ui-widget-content ui-corner-all" /> <label
	for="password">Password</label> <input type="password" name="password"
	id="password" value="" class="text ui-widget-content ui-corner-all" />
<input type="submit" value="submit" /></fieldset>
</form>
</div>

<form id="topicForm" action="createTopic.do" method="post">
<fieldset>
<label for="userId">userId</label> 
<input type="text" name="userId" id="userId" class="text ui-widget-content ui-corner-all" />
<label for="title">title</label> 
<input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all" />
<label for="content">content</label> 
<input type="text" name="content" id="content" value="" class="text ui-widget-content ui-corner-all" />  
<input type="submit" value="submit" />
</fieldset>
</form>

<form id="getTopicForm" action="getTopics.do" method="post">
<fieldset>
<label for="userIdx">userId</label> 
<input type="text" name="userId" id="userIdx" class="text ui-widget-content ui-corner-all" />
<input type="submit" value="submit" />
</fieldset>
</form>

<form id="getMessageForm" action="getMessages.do" method="post">
<fieldset>
<label for="topicId">topicId</label> 
<input type="text" name="topicId" id="topicId" class="text ui-widget-content ui-corner-all" />
<input type="submit" value="submit" />
</fieldset>
</form>

<div id="userResults"></div>
<br/>
<div id="userResults2"></div>
<br/>
<div id="topicResults"></div>
<br/>
<div id="getTopicResults"></div>
<br/>
<div id="getMessageResults"></div>
<br/>
<table id="tableFlex" style="display:none"></table>
<input type="button" id="getName" value="getName" />
</body>
</html>
